<!--
 * @Author: ruins
 * @Date: 2022-01-18 13:45:06
 * @LastEditors: ruins
 * @LastEditTime: 2022-01-21 11:22:18
 * @FilePath: \white-dragon\src\views\Position\components\Recruitment.vue
-->
<template>
  <div class="recruitment-container">
    <!-- 头部信息 -->
    <div class="header">
      <!-- 招聘中 -->
      <el-tag type="info">招聘中</el-tag>
      <el-row type="flex" justify="space-between">
        <!-- 左 -->
        <el-col :span="14">
          <!-- 标题 -->
          <div class="title">
            <span class="position">{{ companyData.position }}</span>
            <span class="salary">
              {{ companyData.salary[0] }}-{{ companyData.salary[1] }}K
              <span
                class="none-padding"
                v-if="companyData.salary[2]"
              >·{{ companyData.salary[2] }}薪</span>
            </span>
          </div>

          <!-- 要求 -->
          <div class="condition">
            <p>
              {{ companyData.city }}
              <em class="dolt"></em>
              {{ companyData.experience }}
              <em class="dolt"></em>
              {{ companyData.education }}
            </p>
          </div>

          <!-- 立即沟通-->
          <el-button type="primary">立即沟通</el-button>
          <el-button type="info" @click="$router.push('/resume')">填写简历</el-button>
        </el-col>

        <!-- 右 -->
        <el-col :span="10">
          <p class="company-name">{{ companyData.cname }}</p>
          <div class="tags">
            <el-tag type="success" plain v-for="item in companyData.welfare" :key="item">{{ item }}</el-tag>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 底部信息 -->
    <div class="main">
      <!-- hr 信息 -->
      <div class="hr-container">
        <el-row type="flex">
          <!-- 头像 -->
          <el-col :span="10">
            <div class="hr-avatar">
              <el-avatar :size="60" :src="hrImg"></el-avatar>
            </div>
          </el-col>
          <!-- 信息 -->
          <el-col :span="14">
            <div class="hr-info">
              <span class="name">{{ companyData.rname }}</span>
              <span class="position">{{ companyData.rposition }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 职位描述 -->
      <div class="describe">
        <h3 class="title">职位描述</h3>
        <div class="describe-list">
          <el-row type="flex" :gutter="40">
            <el-col :span="12">
              <h4>岗位职责</h4>
              <ul>
                <li
                  class="list-item"
                  v-for="(item,index) in describe.description"
                  :key="item"
                >{{ index + 1 }}. {{ item }}</li>
              </ul>
            </el-col>
            <el-col :span="12">
              <h4>岗位要求</h4>
              <ul>
                <li
                  class="list-item"
                  v-for="(item,index) in describe.post"
                  :key="item"
                >{{ index + 1 }}. {{ item }}</li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDescribe } from '@/apis/positon'

export default {
  name: 'Recruitment',
  data () {
    return {
      /* 公司招聘数据 */
      companyData: {},
      /* 岗位描述数据 */
      describe: {},
      /* hr 头像 */
      hrImg: require('@/assets/images/hr.png')
    }
  },
  components: {},
  computed: {},
  watch: {},
  methods: {
    async getDescribe (id) {
      try {
        const { data } = await getDescribe(id)
        this.describe = data
      } catch (error) {
        console.dir(error)
      }
    }
  },
  created () {
    this.companyData = this.$route.params
    this.$nextTick(() => {
      this.getDescribe(this.companyData.id)
    })
  },
  mounted () { }
}
</script>

<style lang="scss" scoped>
ul {
  padding-left: 0;
}
.dolt {
  display: inline-block;
  vertical-align: middle;
  width: 2px;
  height: 2px;
  margin: 0 7px;
  border-radius: 50%;
  background-color: rgba(128, 128, 128, 0.8);
}
.recruitment-container {
  color: #606266;

  .header {
    height: 180px;
    background: linear-gradient(to bottom, #ece9e6, #ffffff);
    margin-bottom: 20px;
    padding: 10px 40px;

    .title {
      .position {
        vertical-align: middle;
        font-size: 32px;
        max-width: 380px;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 400;
        margin-right: 40px;
      }

      .salary {
        display: inline-block;
        vertical-align: middle;
        color: #fa6a43;
        height: 42px;
        font-size: 30px;
        line-height: 42px;
        font-weight: 600;
      }
    }

    .condition {
      margin-bottom: 22px;
      line-height: 20px;
    }

    .company-name {
      vertical-align: middle;
      font-size: 32px;
      max-width: 380px;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 400;
      margin: 0;
    }
    .tags {
      .el-tag {
        margin: 8px;
        margin-left: 0;
      }
    }
  }

  .main {
    background-color: #fff;
    padding: 60px;
    .hr-container {
      width: 180px;

      .hr-info {
        height: 64px;

        .name {
          display: block;
          font-size: 20px;
        }

        .position {
          display: block;
          color: #9fa3af;
          margin-top: 6px;
        }
      }
    }

    .describe {
      .title {
        font-weight: 700;
        color: #424a5e;
        line-height: 50px;
        padding: 0 0 10px 0;
        margin-bottom: 0;
        background: url("~@/assets/images/line-sec.png") 0 45px no-repeat;
      }

      .describe-list {
        .list-item {
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
